@import 'public';
$colorTopFont : #b0b0b0;
$colorTopFontHover : #fff;
$topHeight : 40px;
.top{
    background-color: #333;
    width: 100%;
    height: $topHeight;
    font-size: 12px;
    color: #b0b0b0;
    .container{
        background-color: #333;
        height: $topHeight;
        line-height: $topHeight;
        .top-nav{
            float: left;
            a{
                display: inline-block;
                height: $topHeight;
                color: $colorTopFont;
            }
            a:hover{
                color: $colorTopFontHover;
            }
            span{
                font-family: sans-serif;
                color: #424242;
                margin: 0 3.6px;
            }
        }
        .login{
            float: right;
            a{
                color: $colorTopFont;
            }
            .user{
                display: inline-block;
                height: $topHeight;
                a{
                    color: $colorTopFont;
                }
                a:hover{
                    color: $colorTopFontHover;
                }
                span{
                    display: inline-block;
                    font-family: sans-serif;
                    color: #424242;
                    margin: 0 3.6px;
                }
            }
        }
        .buy{
            float: right;
            width: 120px;
            height: $topHeight;
            background-color: #424242;
            text-align: center;
            margin-left: 15px;
            .buy-font{
                color: $colorTopFontHover;
            }
            
}
        .buy:hover{
            cursor: pointer;
            background-color: #fff;
            color: $color;
                .buy-font{
                    color:$color;
                }
                
        }
    }
}

.header{
    height: 100px;
    // 小米logo
    .logo{
        float: left;
        height: 100px;
        .iconfont{
            font-size: 56px;
            line-height: 100px;
            color: $color;
        }
    }
    // 头部导航栏
    .header-nav{
        width: 800px;
        height: 88px;
        float: left;
        display: flex;
        padding-left: 127px;
        padding-top: 22px;
        li{
            height: 100px;
            a{
                display: inline-block;
                height: 88px;
                color: black;
                padding: 26px 10px 38px;
                transition: 0.2s;
                -webkit-transition: 0.2s;
                -moz-transition: 0.2s;
                -ms-transition: 0.2s;
                -o-transition: 0.2s;
}
            a:hover{
                color: $color;
            }
        }
    }
    // 头部搜索框
    .search{
        float: right;
        height: 100px;
        line-height: 100px;
        // margin-top: 25px;
        input{
            display: inline-block;
            width: 245px;
            height: 50px;
            border: 1px solid #e0e0e0;
            transition: 0.5s;
            -webkit-transition: 0.5s;
            -moz-transition: 0.5s;
            -ms-transition: 0.5s;
            -o-transition: 0.5s;
        }       
        
        .border{
            display: inline-block;
            width: 50px;
            height: 50px;
            vertical-align: middle;
            border: 1px solid #e0e0e0;
            border-left: 0px;
            text-align: center;
            line-height: 50px;
            transition: 0.5s;
            color: #333;
            -webkit-transition: 0.5s;
            -moz-transition: 0.5s;
            -ms-transition: 0.5s;
            -o-transition: 0.5s;
            span{
                display: inline-block;
                font-size: 30px;
                line-height: 50px;
            }
        }
        .border:hover{
            background-color: $color;
            span{
                color: white;
            }
        }
        

    }
    .search:hover{
        input,.border{
            border-color: rgb(133,133,133);
        }
        
    }
}
